<template>
  <div class="loginContainer">
    <NavBar>
      <div class="left head_goback" slot="left" @click="onClickLeft">
        <!-- <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
	    			<circle cx="8" cy="8" r="7" stroke="rgb(0,0,0)" stroke-width="1" fill="none"/>
	    			<line x1="14" y1="14" x2="20" y2="20" style="stroke:rgb(0,0,0);stroke-width:2"/>
	      </svg> -->
        <svg width="18px" height="18px" xmlns="http://www.w3.org/2000/svg" version="1.1">
                <polyline points="12,18 4,9 12,0" style="fill:none;stroke:rgb(0,0,0);stroke-width:2"/>
        </svg>
      </div>
      <div class="center" slot="center">账号登录</div>
    </NavBar>
    
    <form class="loginForm">
      <section class="input_container">
        <input type="text" placeholder="账号" v-model.lazy="userAccount" />
      </section>
      <section class="input_container">
        <input
          v-if="!showPassword"
          type="password"
          placeholder="密码"
          v-model="passWord"
        />
        <input v-else type="text" placeholder="密码" v-model="passWord" />
        <div class="button_switch" :class="{ change_to_text: showPassword }">
          <div
            class="circle_button"
            :class="{ trans_to_right: showPassword }"
            @click="changePassWordType"
          ></div>

          <span>abc</span>
          <span>...</span>
        </div>
      </section>
      <section class="input_container captcha_code_container">
        <input
          type="text"
          placeholder="验证码"
          maxlength="4"
          v-model="codeNumber"
        />
        <div class="img_change_img">
          <img v-show="captchaCodeImg" :src="captchaCodeImg" />
          <div class="change_img" @click="getCaptchaCode">
            <p>看不清</p>
            <p>换一张</p>
          </div>
        </div>
      </section>
    </form>
    <p class="login_tips">温馨提示：未注册过的账号，登录时将自动注册</p>
    <p class="login_tips">注册过的用户可凭账号密码登录</p>
    <div class="login_container" @click="login">登录</div>

    <router-link to="/forget" class="to_forget">重置密码？</router-link>
    <!-- <alert-tip></alert-tip> -->
  </div>
</template>

<script>
import NavBar from "../../components/NavBar.vue";
import { getCaptchas, mobileLogin } from "../../api/reques.js";
import { setCookie } from "../../utils/cookie";
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      showPassword: false, // 是否显示密码
      computedTime: 0, //倒数记时
      userInfo: {}, //获取到的用户信息
      userAccount: "晶晶漏鸡脚", //用户名
      passWord: "666666", //密码
      captchaCodeImg: null, //验证码地址
      codeNumber: null, //验证码
      showAlert: false, //显示提示组件
      alertText: null, //提示的内容

    };
  },
  created() {
    this.getCaptchaCode();
    
  },
  components: {
    NavBar,
  },

  computed: {
    //判断手机号码
    rightPhoneNumber: function () {
      return /^1\d{10}$/gi.test(this.phoneNumber);
    },
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    // 获取验证码
    async getCaptchaCode() {
      const res = await getCaptchas();
      console.log(res);
      this.captchaCodeImg = res.data.code;
    },
    async login() {
      const res = await mobileLogin({
        username: this.userAccount,
        password: this.passWord,
        captcha_code: this.codeNumber,
      });
      this.userInfo.username = this.userAccount;
      this.userInfo.balance = 520;
      this.userInfo.discount = 3;
      this.userInfo.integral = 999;
      this.userInfo.bind=18888888888;
      this.userInfo.headImg = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171221%2F2a14e6b09df846a1908379c06045ba96.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632980511&t=1f6f2bedc483c3e128111ab973758fe5'
      this.$store.commit("setUserInfo", this.userInfo);
      localStorage.setItem("login","{'logging_status':true}") //保存为json格式
      localStorage.setItem("set1","{username: '晶晶漏鸡脚', 'user_id': 74073, 'id': 74073, 'city': '广州', 'registe_time': '2022-10-11 14:2'}") //保存为json格式
      localStorage.setItem('user_id', 74073,);
      console.log(this.$router)
      this.$router.back()
    },
    //是否显示密码
    changePassWordType() {
      this.showPassword = !this.showPassword;
    },
    //

  },

  closeTip() {
    this.showAlert = false;
  },
};
</script>


<style lang="scss" scoped>
@import "../../style/mixin";

.loginContainer {
  padding-top: 1.95rem;
  p,
  span,
  input {
    font-family: Helvetica Neue, Tahoma, Arial;
  }
}
.change_login {
  position: absolute;
  @include ct;
  right: 0.75rem;
  @include sc(0.7rem, #fff);
}

.loginForm {
  background-color: #fff;
  margin-top: 0.6rem;
  .input_container {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid #f1f1f1;
    input {
      @include sc(0.7rem, #666);
    }
    button {
      @include sc(0.65rem, #fff);
      font-family: Helvetica Neue, Tahoma, Arial;
      padding: 0.28rem 0.4rem;
      border: 1px;
      border-radius: 0.15rem;
    }
    .right_phone_number {
      background-color: #4cd964;
    }
  }
  .phone_number {
    padding: 0.3rem 0.8rem;
  }
  .captcha_code_container {
    height: 2.2rem;
    .img_change_img {
      display: flex;
      align-items: center;
      img {
        @include wh(3.5rem, 1.5rem);
        margin-right: 0.2rem;
      }
      .change_img {
        display: flex;
        flex-direction: "column";
        flex-wrap: wrap;
        width: 2.5rem;
        justify-content: center;
        p {
          @include sc(0.55rem, #666);
        }
        p:nth-of-type(2) {
          color: #3b95e9;
          margin-top: 0.2rem;
        }
      }
    }
  }
}
.login_tips {
  @include sc(0.5rem, red);
  padding: 0.4rem 0.6rem;
  line-height: 0.5rem;
  a {
    color: #3b95e9;
  }
}
.login_container {
  margin: 0 0.5rem 1rem;
  @include sc(0.7rem, #fff);
  background-color: #4cd964;
  padding: 0.5rem 0;
  border: 1px;
  border-radius: 0.15rem;
  text-align: center;
}
.button_switch {
  background-color: #ccc;
  display: flex;
  justify-content: center;
  @include wh(2rem, 0.7rem);
  padding: 0 0.2rem;
  border: 1px;
  border-radius: 0.5rem;
  position: relative;
  .circle_button {
    transition: all 0.3s;
    position: absolute;
    top: -0.2rem;
    z-index: 1;
    left: -0.1rem;
    @include wh(1.2rem, 1.2rem);
    box-shadow: 0 0.026667rem 0.053333rem 0 rgba(0, 0, 0, 0.1);
    background-color: #f1f1f1;
    border-radius: 50%;
  }
  .trans_to_right {
    transform: translateX(1.3rem);
  }
  span {
    @include sc(0.45rem, #fff);
    transform: translateY(0.05rem);
    line-height: 0.6rem;
  }
  span:nth-of-type(2) {
    transform: translateY(-0.08rem);
  }
}
.change_to_text {
  background-color: #4cd964;
}
.to_forget {
  float: right;
  @include sc(0.6rem, #3b95e9);
  margin-right: 0.3rem;
}
</style>
